<template>
  <div class="div_div_box">
    <div class="fd">
      <div class="baglist">
        <img src="../assets/返回(1).png" class="images" @click="imgedit" />
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in infolist" :key="index">
            <img src="../assets/info.jpg" width="400px" />
          </van-swipe-item>
        </van-swipe>
        <p class="p_bag">{{ infolist.basicInfo.characteristic }}</p>
        <p class="p_bags">
          <span>低价￥{{ infolist.basicInfo.kanjiaPrice }}</span>
          <span>原价￥{{ infolist.basicInfo.kanjiaPrice }}</span>
        </p>
      </div>
      <!-- 选项卡 -->
      <van-tabs>
        <van-tab title="商品介绍 ">
          <div v-html="infolist.content" class="div_content"></div>
        </van-tab>
        <van-tab title="商品评价"> 你猜 </van-tab>
      </van-tabs>
    </div>
    <!-- 底部加入购物车 -->
        <button class="div_bottom_box">立即发起砍价，最低可砍到1元</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      infolist: [],
      show: false,
      addiconList: [],
    };
  },
  mounted() {
    var id = this.$route.query.id;
    console.log(id);
    this.$APL
      .DETAILPOST({
        params: {
          id: id,
        },
      })
      .then((res) => {
        console.log(res.data);
        this.infolist = res.data.data;
      });

    //弹出层
  },
  methods: {
    imgedit() {
      window.history.back();
    },

    //立即购买
    addicon() {
      this.show = true;
    },
    
  },
};
</script>

<style lang="scss">
.baglist {
  background: white;
}
// 弹出层
.div_icon_bottom {
  width: 100%;
  display: flex;
  margin: 0.3rem;
  border-bottom: 1px solid gainsboro;
  img {
    width: 2rem;
    height: 2rem;
  }
  p {
    margin: 0.5rem;
    &:nth-child(2) {
      color: red;
    }
  }
}
//牛仔外套
.div_NZ {
  width: 100%;
  margin: 0.2rem;
  border-bottom: 1px solid gainsboro;
  ol {
    width: 100%;
    display: flex;
    justify-content: space-around;
    height: 100%;
    align-items: center;
    li {
      width: 30%;
      height: 0.5rem;
      line-height: 0.5rem;
      border-radius: 0.5rem;
      text-align: center;
      margin: 0.2rem;
      border: 1px solid gainsboro;
    }
  }
}
//购买数量
.div_nums{
  width: 100%;
  height: 1.5rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
//立即购买
.btn{
  width: 100%;
  height: 1rem;
  background: #b7282e;
  color: white;
  border: 0;
}

.images {
  width: 40px;
  position: absolute;
  z-index: 999;
}
.p_bag {
  font-size: 0.3rem;
  margin: 0.3rem;
}
.p_bags {
  margin: 0.3rem;
  span {
    padding: 0.2rem;
    &:nth-child(1) {
      color: red;
    }
    &:nth-child(2) {
      color: gainsboro;
    }
  }
}
.div_da {
  background: white;
  width: 100%;
}
.div_xuan {
  width: 100%;
  height: 1rem;
  // background: wheat;
  display: flex;
  line-height: 1rem;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  p {
    width: 50%;
    height: 100%;
    // background: chocolate;
    font-size: 0.4rem;
    &:hover {
      border-bottom: 2px solid lightcoral;
    }
  }
}
.div_content {
  width: 100%;
  li {
    width: 100%;
    display: flex;
    margin: 0.2rem;
  }
  img {
    width: 100%;
    height: 100%;
  }
}
.fd {
  width: 100%;
  height: 94vh;
  position: relative;
  overflow: scroll;
}
.div_bottom_box {
  width: 100%;
  height: 6vh;
  background: #b7282e;
  overflow: scroll;
  z-index: 999999;
  border: 0;
  color: white;
}
</style>